<template>
  <div id="buyCard">
    <header-nav linkUrl="buyCardRecord" linkText="购卡记录" :me-card="agentMsg.cardnum"></header-nav>
    <group class="agent_box">
      <p>代理名称:<span>{{agentMsg.nickname}}</span></p>
      <p>充值账号:<span>{{agentMsg.mobile}}</span></p>
    </group>
    <get-goods-type :goods-list="cardList" :goods-dec-list="cardDecList" ref="getGoodsType"></get-goods-type>
    <get-pay-code pay-code="balance" :pay-list="payList" ref="getPayCode">
      <!-- 余额购卡 -->
      <span slot="balance" class="balance"> 余额:{{agentMsg.user_money}}元 </span>
    </get-pay-code>
     <x-button class="buy_btn" type="submit" style="background:#108ee9" @click.native="buyCardBtn()">立即购买</x-button>
    <!-- 确认发卡弹框提示 -->
    <modal-box ref="modal" @on-confirm="submitForm()">
      <div slot="modal__bd">
        <p>您的余额剩余{{agentMsg.user_money}}元，确定要使用余额支付吗？</p> 
      </div>
    </modal-box>

  </div>
</template>

<script>
import { Group, XButton } from "vux";
import headerNav from "../../../components/header/headerNav";
import modalBox from "../../../components/common/modalBox";
import getGoodsType from "../../../components/common/getGoodsType";
import getPayCode from "../../../components/common/getPayCode";
export default {
  data() {
    return {
      agentMsg: {}, //代理信息
      cardList: null, //卡信息列表
      cardDecList: {}, //选中卡注释列表
      payList: ["balance", "alipay"]
    };
  },
  created() {
    this.getAgentMsg();
    this.getPaycard();
  },
  components: {
    headerNav,
    modalBox,
    Group,
    XButton,
    getGoodsType,
    getPayCode
  },
  methods: {
    getAgentMsg() {
      this.apiService.user.userinfo().then(res => {
        this.agentMsg = res.data;
      });
    },
    getPaycard() {
      this.apiService.goods.paycard().then(res => {
        //购卡信息显示
        this.cardList = res.data.purchasecard;
        this.cardList.forEach(c => {
          this.cardDecList[c.id] = {
            carDec: `${c.paycard}张+赠送${c.givecard}张+加赠${
              c.bonuscard
            }张，总共<span>${c.sumcard}</span>张`,
            carMoney: c.money
          };
        });
        //获取支付方式
        this.payList.push(res.data.pay_code);
      });
    },
    buyCardBtn() {
      //获取选中的卡id
      let id = this.$refs.getGoodsType.selected_id;
      let payCode = this.$refs.getPayCode.pay_code;
      //将余额与选中金额转化成number类型比较大小
      let balance = parseInt(this.agentMsg.user_money);
      let selectedMoney = parseInt(this.cardDecList[id].carMoney);
      //如果是余额购卡给出弹框提示
      if (this.payCode == "balance") {
        if (selectedMoney <= balance)
          this.$refs.modal.opens("confirm", this.COMPANY_GAME_NAME);
        else
          this.$refs.modal.opens(
            "alert",
            this.COMPANY_GAME_NAME,
            `您的余额为${balance}元，余额不足，请用其它支付方式！`
          );
      } else {
        this.submitForm(id,selectedMoney,payCode);
      }
    },
    submitForm(id,money,payCode) {
      this.apiService.payment
        .agentorder({
          id: id,
          money: money,
          pay_code: payCode,
          ordertype: "agent"
        })
        .then(res => {
          //支付成功后请求代理信息
          if (this.payCode == "balance") {
            this.$refs.modal.opens("alert", this.COMPANY_GAME_NAME, `购买成功`);
            this.getAgentMsg();
          } else {
            //如果不是余额购卡进行跳转页面处理
            if (res.data.islocation == 1) {
              location.href = res.data.url;
            } else {
              let host = window.location.host;
              location.replace(
                `//${host}/payment?orderid=${res.data.orderid}&pay_code=${
                  res.data.pay_code
                }&ordertype=agent`
              );
            }
          }
        });
    }
  }
};
</script>
<style scoped>
#buyCard {
  height: 100%;
}
.agent_box p {
  width: 50%;
  margin: 0 auto;
  padding: 0.1rem 0;
  font-size: 0.3rem;
  color: rgb(100, 100, 100);
}
.agent_box p span {
  margin-left: 0.25rem;
  color: #000;
}
.buy_btn {
  width: 90%;
  margin-top: 0.4rem;
}
</style>
<style>
#buyCard .agent_box .weui-cells {
  margin: 0;
  padding: 0.35rem 0;
}
</style>
